<template>
  <view>
    <view class="box-list" :style="needPadding ? 'padding: 0 41rpx 0 37rpx' : ''">
      <view class="box" v-for="(item, index) in shopData" :key="index" @click="submitClick(item)">
        <view class="left">
          <image class="left-img" :src="item.images" alt="" />
          <view v-if="item.status" class="img-tag">
            消费{{ item.status }}次
          </view>
          <view v-if="item.text" class="left-text" @click="textClick(item)">{{ item.text }}</view>
        </view>
        <view class="right">
          <view class="shop-name">
            <view class="name-left">
              <view class="name">{{ item.storeName }}</view>
              <view class="tag-number" v-if="item.state">001</view>
              <view :class="['status', item.status === 1 ? 'during' : (item.status === 2 ? 'ready' : 'stop')]"
                v-if="item.status">
                {{ item.status === 1 ? '营业中' : (item.status === 2 ? '筹备中' : '暂停营业') }}
              </view>
            </view>
            <view class="name-right">
              <uni-icons type="location-filled" size="20" color="#b4b4b4"></uni-icons>
              <view class="distant">{{ item.distance }} km</view>
              <uni-icons type="right" size="12" color="#676767"></uni-icons>
            </view>
          </view>
          <view class="not-during" v-if="item.state !== 1 && item.state">5月13日开业</view>
          <view class="shop-time">
            <view class="time-left">
              <u-icon name="clock" color="#666666" size="15"></u-icon>
              <view class="time" :style="needTime ? 'transform: translateY(6rpx)' : ''">营业时间： {{ item.openingTime }}~{{ item.closingTime }}</view>
            </view>
            <view class="time-right" v-if="item.status">
              <view class="detail" @click="toShopDetail(item)">详情</view>
            </view>
          </view>
          <view class="shop-address">
            <view class="address-left">
              <view style="height: 30rpx;"><u-icon name="map" color="#666666" size="15"></u-icon></view>
              <view class="address">{{ item.provinceString }}{{ item.cityString }}{{ item.countyString }}{{ item.detail }}</view>
            </view>
            <view class="address-right" v-if="item.status">
              <view class="detail" @click="toPreserve(item)">预约</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <you-popup :popupVisible="statusVisible" popupTitle="温馨提示" @popupClose="statusVisible = false" @cancel="clickCancel"
        @confirm="clickConfirm" bgColor="#fff">
        <view slot="popupContent">
          <!-- 标题 -->
          <view class="contain-text"> 确认要取消门店的常用标记吗？</view>
        </view>

        <view slot="btnBox" class="popup-submit flexJcac">
          <view class="submit" @click="submitStatus">是</view>
          <view class="no-submit" @click="statusVisible = false">否</view>
        </view>
      </you-popup>
    </view>
    <view>
      <you-popup :popupVisible="stopVisible" popupTitle="温馨提示" @popupClose="stopVisible = false" @cancel="clickCancel"
        @confirm="clickConfirm" bgColor="#fff">
        <view slot="popupContent">
          <!-- 标题 -->
          <view class="contain-text">
            {{ popupFlag === 1 ? ' 您选择的门店因XX原因暂停营业，预XX月xx日恢复营业，请选择其他门店。'
              : '该门店正在筹备中，暂无法为您提供服务' }}
          </view>
        </view>
        <view slot="btnBox" class="popup-submit flexJcac">
          <view class="submit" @click="stopVisible = false">确定</view>
        </view>
      </you-popup>
    </view>
  </view>
</template>

<script>
import YouPopup from "../you-popup/index.vue"
import config from '@/config'
export default {
  name: 'shopList',
  components: { YouPopup },
  data() {
    return {
      id: '',
      baseUrl: config.baseUrl,
      popupFlag: '',
      statusVisible: false,
      stopVisible: false,
      shopData: [],
      statusBgColor: {
        1: 'background: linear-gradient(90deg, rgba(252, 120, 66, 1) 0%, rgba(254, 85, 56, 1) 100%)',
        2: 'background: rgba(201, 201, 201, 1);'
      },
    }
  },
  props: {
    shopConfig: {
      type: Array,
      default: []
    },
    needPadding: {
      type: Boolean,
      default: true
    },
    needTime: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    shopConfig: {
      handler(newVal, oldVal) {
        this.shopData = [...newVal]
      }
    }
  },
  created() {
    this.shopData = [...this.shopConfig]
  },

  methods: {
    toShopDetail(item) {
      if (item.status === 1) {
        this.$emit('toDetail', item)
      }
      if (item.status === 2) {
        this.popupFlag = 2
        this.stopVisible = true
      }
      if (item.status === 3) {
        this.popupFlag = 1
        this.stopVisible = true
      }
    },
    toPreserve(item) {
      this.$emit('toPreserve',item)
    },
    // changeStatus(item) {
    //   if (item.status === 1) {
    //     this.statusVisible = true
    //     this.id = item.id
    //   } else {
    //     item.status = 1
    //   }
    // },
    textClick(item) {
      this.$emit('textClick', item)
    },
    submitClick(item) {
      this.$emit('submitClick', item)
    },
    submitStatus() {
      const index = this.shopData.findIndex((item) => {
        return item.id == this.id
      })
      this.shopData[index].status = 2
      this.statusVisible = false
    }
  }

}
</script>

<style lang="scss" scoped>
.contain-text {
  width: 100%;
  text-align: center;
}

.box-list {
  // padding: 0 41rpx 0 37rpx;

  .box {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0 28rpx 0;
    border-bottom: 1rpx solid rgba(230, 230, 230, 1);

    &:last-child {
      border-bottom: none;
    }

    .left {
      width: 130rpx;
      height: 130rpx;
      position: relative;

      .left-img {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
      }

      .img-tag {
        position: absolute;
        bottom: -20rpx;
        left: 10.2rpx;
        width: 106rpx;
        height: 40rpx;
        font-size: 20rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        opacity: 1;
        border-radius: 31rpx;
        background-color: #fc7441;
      }

      .left-text {
        margin-top: 14rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(194, 126, 21, 1);
        text-align: center;
      }
    }

    .right {
      width: 75%;

      .shop-name {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12rpx;

        .name-left {
          display: flex;

          .name {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            height: 37rpx;
            line-height: 37rpx;
          }

          .tag-number {
            width: 80rpx;
            height: 37rpx;
            opacity: 1;
            border-radius: 8rpx;
            line-height: 37rpx;
            border: 1rpx solid rgba(253, 90, 57, 1);
            text-align: center;
            font-size: 20rpx;
            font-weight: 400;
            color: rgba(253, 89, 57, 1);
            margin-left: 20rpx;
          }

          .status {
            width: 99rpx;
            height: 37rpx;
            opacity: 1;
            border-radius: 8rpx;
            line-height: 37rpx;
            font-size: 20rpx;
            font-weight: 400;
            text-align: center;
            margin-left: 12rpx;
          }

          .during {
            color: rgba(253, 89, 57, 1);
            background: rgba(255, 237, 234, 1);
          }

          .stop {
            color: rgba(176, 171, 170, 1);
            background: rgba(243, 243, 243, 1);
          }

          .ready {
            color: rgba(222, 178, 0, 1);
            background: rgba(255, 250, 231, 1);
          }
        }

        .name-right {
          display: flex;

          .distant {
            font-size: 22rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 31.86rpx;
            color: rgba(102, 102, 102, 1);
            margin: 0 5rpx 0 6rpx;
            transform: translateY(5rpx);
          }
        }
      }

      .not-during {
        font-size: 22rpx;
        font-weight: 400;
        color: rgba(253, 89, 57, 1);
      }

      .shop-time {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12rpx;

        .time-left {
          display: flex;

          .time {
            font-size: 22rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            // transform: translateY(6rpx);
            margin-left: 10rpx;
          }
        }

        .time-right {
          .detail {
            width: 92rpx;
            height: 41rpx;
            opacity: 1;
            border-radius: 32rpx;
            line-height: 41rpx;
            border: 1rpx solid rgba(194, 126, 21, 1);
            text-align: center;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(194, 126, 21, 1);
          }
        }
      }

      .shop-address {
        display: flex;
        justify-content: space-between;

        .address-left {
          display: flex;
          width: 75%;

          .address {
            font-size: 22rpx;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            margin-left: 9rpx;
          }
        }

        .address-right {
          margin-top: 10rpx;
          // margin-right: 20rpx;

          img {
            width: 41.92rpx;
            height: 41.92rpx;
          }
          .detail {
            width: 92rpx;
            height: 41rpx;
            opacity: 1;
            border-radius: 32rpx;
            line-height: 41rpx;
            background: rgba(194, 126, 21, 1);
            text-align: center;
            font-size: 24rpx;
            font-weight: 400;
            color: #fff;
          }

        }
      }
    }

  }
}</style>